<template>
<div class="detaild">

    <i-row>

        <!-- info -->
        <i-col :sm='13'>

            <div class="detaild-info">

                <div class="labels">
                    <span class="label" v-for='(label, key) of labels' :key='key'>
                        {{label}}
                    </span>
                </div>

                <div class="info">
                    <component v-for='(label, key) of labels' :key='key' :data='buildData[key]' :is="setCp(key)"></component>
                </div>

            </div>

        </i-col>
        
        <!-- imgs -->
        <i-col :sm='11'>
            <div class="car-thumbnail">
                <l-thumbnail :data='detaild.imgs'></l-thumbnail>
            </div>
        </i-col>
    </i-row>

    
</div>
</template>

<script lang='ts'>
import {Component, Vue, Prop} from 'vue-property-decorator';
import commendData from '@/utils/commend';
import Text from '@/components/text/index.vue';
import Tips from '@/components/tips/index.vue';
import Whatsapp from '@/components/whatsapp/index.vue';
import QrCode from '@/components/qrCode/index.vue';
import Thumbnail from '@/components/thumbnail/index.vue';


@Component({
    components:{

        'l-text': Text,
        'l-tips': Tips,
        'l-Whatsapp': Whatsapp,
        'l-qrCode': QrCode,
        'l-thumbnail': Thumbnail

    }
})
export default class Topbar extends Vue{

    @Prop()
    detaild?: any 
    
    @Prop()
    labels: any

    get buildData (){

        let end = this.detaild;
        
        if(end){
            // 车辆类型
            end.classify = commendData.carClassify[end.classify];
            
            // 牌费
            end.plateNum = end.plateNum ? '牌费制' : '无牌费';
             
        }

        
        return end
        
    }

    setCp(key: string){
        let cp = 'l-text';
        
        switch (key) {

            case 'tips':
                cp = 'l-tips';
                break;

            case 'whatsapp':
                cp = 'l-Whatsapp';
                break;
            
            case 'qrCode':
                cp = 'l-qrCode';
                break;
        }

        return cp;

    }

}


</script>

<style scoped lang='less'>
.detaild{
    overflow: hidden;
}

.detaild-item{
    .lable{
        padding: 10@rem;
        text-align: center;
    }
}

.detaild-info{
    display: flex;
    justify-content: sapce-between;

    .labels,
    .info{
        padding: 10*@rem 0;
    }
    
    .labels{
        @w: 180*@rem;
        flex: 0 0 @w;
        width: @w;
        background: url('../../assets/detaild-bg.png') center no-repeat;
        background-size: 100%-- 100%;
    }
    .label{
        display: block;
        padding: 10*@rem 30*@rem;
        color: @fontColorLight;
    }

   

}

.car-thumbnail{
    padding-left: 30*@rem;
    border-left: 1*@rem solid #eee;
}


/*  760px  */

@media (max-width: 768px){

   .car-thumbnail{
    padding: 0 ;
    border-left: none;
   }

}

</style>